<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式绑定</title>
    <script src="/js/vue.js"></script>
    <style>
        .active{
            text-decoration: underline;
        }
        .danger{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
       
        <div :class="{active:isActive,'text-danger':isDanger}">Hello</div>
        <div :class="cssObj">Shane</div>
        
       
        <div :class="['active','text-danger']">Hello Vue</div>
        <div :class="[isActive ? 'active' : '',isDanger ? 'text-danger':''] ">Hello Kitty</div>

        
        <div :style="{color:'red','font-size':'50sp'}">Hello Tom</div>
    
        <div :style="[objcss,moreStyle]">Hello Tom</div>
    </div>
<br>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:'hello world',
                isActive:true,
                isDanger:true,
                cssObj:{
                    active:true,
                    'text-danger':false
                },
                objcss:{
                    color:'blue',
                    'font-size':'10px'
                },
                moreStyle:{
                    'text-decoration':'underline'
                },
                danger:'text-danger'
            }
        })
    </script>
</body>
</html>